<!--
 * @Author: Wayne 13235388225@163.com
 * @Date: 2023-09-23 08:50:37
 * @LastEditors: Wayne 13235388225@163.com
 * @LastEditTime: 2023-09-23 10:28:43
 * @FilePath: \Jkc-app-front-new\src\views\uploadMaterials\uploadMaterials.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="upload_materials_container">
    <div class="upload_materials_box">
      <div class="upload_top_btn">
        <el-button type="primary" size="mini" @click="handlerAdd"
          >添加素材</el-button
        >
      </div>
      <div>
        <el-table :data="tableDataUpload" style="width: 100%">
          <el-table-column prop="id" label="id" width="100"> </el-table-column>
          <el-table-column prop="media_id" label="素材id"> </el-table-column>
          <el-table-column prop="created_at" label="创建时间">
          </el-table-column>
          <el-table-column prop="updated_at" label="更新时间">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="260">
            <template slot-scope="scope">
              <el-button @click="handlerUse(scope.row)" type="text" size="small"
                >使用素材</el-button
              >
              <el-button
                @click="handleCheck(scope.row)"
                type="text"
                size="small"
                >查看素材</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="handlerDelete(scope.row)"
                >删除素材</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 添加素材弹窗 -->
    <el-dialog
      title="添加素材"
      :visible.sync="dialogVisibleAddMaterials"
      width="30%"
    >
      <div class="dialog_add_box">
        <el-upload
          style="margin-right: 30px"
          class="upload-demo"
          accept=".jpeg,.png,.jpg,.bmp"
          :action="uploadMainImgUrl"
          :on-success="onSuccessFile"
          :on-error="onErrorFile"
          :data="{ media_type: 'image' }"
          list-type="text"
        >
          <el-button size="small" type="primary">上传素材</el-button>
        </el-upload>
      </div>
    </el-dialog>

    <!-- 查看素材弹窗 -->
    <el-dialog
      title="查看素材"
      :visible.sync="dialogVisibleCheckMaterials"
      width="30%"
    >
      <div class="dialog_check_box">
        <img
          :src="checkMaterialImg"
          alt=""
          class="check_img"
          style="width: 200px; height: 200px"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="info" @click="dialogVisibleCheckMaterials = false"
          >取消</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      title="查看密码"
      :visible.sync="dialogVisiblePassword"
      width="30%"
    >
      <div>
        <div>请输入密码进行查看</div>
        <div>
          <el-input v-model="passwordValue" placeholder="请输入密码"></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelDialogPassword">取 消</el-button>
        <el-button type="primary" @click="sureDialogPassword">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getMediaList } from "@/api/uploadMaterials";
export default {
  data() {
    return {
      tableDataUpload: [],
      pageNow: 1,
      pageSize: 10,
      total: null,
      dialogVisibleAddMaterials: false,
      uploadMainImgUrl: "https://kf.wechat.work.jkcae.com/api/upload_file", // 主图url
      deleteId: "", // 删除id
      dialogVisibleCheckMaterials: false,
      checkMediaId: "", // 查看素材的media_id
      checkMaterialImg: "",
      useId: "", // 使用id
      dialogVisiblePassword: true,
      passwordValue: "",
    };
  },
  mounted() {
    // this.getMediaList();
  },
  methods: {
    // 获取素材列表
    getMediaList() {
      const axios = require("axios");
      axios
        .get(
          "https://kf.wechat.work.jkcae.com/api/getMediaListApi?page_now=" +
            this.pageNow +
            "&page_size=" +
            this.pageSize,
          "GET"
        )
        .then((res) => {
          if (res.data.code == 0) {
            this.tableDataUpload = res.data.data;
          } else {
            this.$message.error(res.data.msg);
            return;
          }
        });
    },

    // 删除素材
    delMediaList() {
      const axios = require("axios");
      axios
        .post(
          "https://kf.wechat.work.jkcae.com/api/delMediaListApi",
          {
            id: this.deleteId,
          },
          "POST"
        )
        .then((res) => {
          if (res.data.code == 0) {
            this.$message.success(res.data.msg);
            this.getMediaList();
          } else {
            this.$message.error(res.data.msg);
            return;
          }
        });
    },

    // 查看素材接口
    getTemporaryMedia() {
      const axios = require("axios");
      axios
        .get(
          "https://kf.wechat.work.jkcae.com/api/getTemporaryMedia?media_id=" +
            this.checkMediaId,
          "GET"
        )
        .then((res) => {
          if (res.data.code == 0) {
            this.checkMaterialImg = res.data.data;
          } else {
            this.$message.error(res.data.msg);
            return;
          }
        });
    },

    // 使用素材
    updateMediaStatus() {
      const axios = require("axios");
      axios
        .get(
          "https://kf.wechat.work.jkcae.com/api/updateMediaStatus?id=" +
            this.useId,
          "GET"
        )
        .then((res) => {
          if (res.data.code == 0) {
            this.$message.success(res.data.msg);
            this.getMediaList();
          } else {
            this.$message.error(res.data.msg);
            return;
          }
        });
    },

    // 上传主图
    onSuccessFile(val) {
      if (val.code == 0) {
        this.$message.success(val.msg);
        this.dialogVisibleAddMaterials = false;
        this.getMediaList();
      } else {
        this.$message.error(val.msg);
        return;
      }
    },
    onErrorFile(val) {},

    // 添加素材
    handlerAdd() {
      this.dialogVisibleAddMaterials = true;
    },

    // 使用素材
    handlerUse(val) {
      this.useId = val.id;
      this.$confirm("此操作将使用该素材, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.updateMediaStatus();
        })
        .catch(() => {});
    },

    // 查看素材
    handleCheck(val) {
      this.checkMediaId = val.media_id;
      this.getTemporaryMedia();
      this.dialogVisibleCheckMaterials = true;
    },

    // 删除素材
    handlerDelete(val) {
      this.deleteId = val.id;
      this.$confirm("此操作会删除该素材内容, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.delMediaList();
        })
        .catch(() => {});
    },

    // 取消查看密码
    cancelDialogPassword() {
      this.dialogVisiblePassword = false;
    },

    // 确定查看密码
    sureDialogPassword() {
      if (this.passwordValue == "123456") {
        this.dialogVisiblePassword = false;
        this.getMediaList();
      } else {
        this.$message.error("密码错误,无权查看");
        return;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.upload_materials_container {
  .upload_materials_box {
    padding: 0 30px;

    .upload_top_btn {
      padding: 30px 0;
    }
  }
}
</style>
